import React, { useRef } from 'react';
import ProForm, { StepsForm, ProFormText, ProFormDatePicker, ProFormSelect, ProFormTextArea, ProFormCheckbox } from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import { message } from 'antd';

const waitTime = (time = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

const StepPro = () => {
    const formRef = useRef();
    return (<ProCard>
        <StepsForm formRef={formRef} onFinish={async () => {
            await waitTime(1000);
            message.success('提交成功');
        }} formProps={{
            validateMessages: {
                required: '此项为必填项',
            },
        }}>
            <StepsForm.StepForm name="base" title="创建机器" stepProps={{
                description: '这里填入xx',
            }} onFinish={async () => {
                var _a;
                console.log((_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getFieldsValue());
                await waitTime(2000);
                return true;
            }}>
                <ProFormText name="name" label="实验名称" width="md" tooltip="最长为 24 位，用于标定的唯一 id" placeholder="请输入名称" rules={[{ required: true }]} />
                <ProFormDatePicker name="date" label="日期" />
                <ProFormTextArea name="remark" label="备注" width="lg" placeholder="请输入备注" />
            </StepsForm.StepForm>

            <StepsForm.StepForm name="checkbox" title="设置主机" stepProps={{
                description: '这里填入xxxx',
            }} onFinish={async () => {
                var _a;
                console.log((_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getFieldsValue());
                return true;
            }}>
                <ProForm.Group>
                    <ProFormText name="dbname" label="业务 DB 用户名" />
                    <ProFormDatePicker name="datetime" label="记录保存时间" width="sm" />
                    <ProFormCheckbox.Group name="checkbox" label="迁移类型" options={['完整 LOB', '不同步 LOB', '受限制 LOB']} />
                </ProForm.Group>
            </StepsForm.StepForm>

            <StepsForm.StepForm name="time" title="确认配置" stepProps={{
                description: '这里填入xxx',
            }}>
                <ProFormCheckbox.Group name="checkbox" label="部署单元" rules={[
                    {
                        required: true,
                    },
                ]} options={['部署单元1', '部署单元2', '部署单元3']} />
                <ProFormSelect label="部署分组策略" name="remark" rules={[
                    {
                        required: true,
                    },
                ]} initialValue="1" options={[
                    {
                        value: '1',
                        label: '策略一',
                    },
                    { value: '2', label: '策略二' },
                ]} />
            </StepsForm.StepForm>
        </StepsForm>
    </ProCard>);
};

export default StepPro;